<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<html:header title="选择行业"
             keywords=""
             description="">
    <style type="text/css">

        .center {
            background-color: #ffffff;
            width: 400px;
            margin: 50px auto;
            padding-left: 20px;
            padding-bottom: 20px;
        }

        .title{
            padding: 40px 0 0px 0;
            text-align: center;
            width: 100%;
            font-size: 20px;
            color: #393D49;
        }

        .industry-box{
            margin: 20px 20px 0 0;
            padding: 20px 0 20px 0;
            border: 1px #1E9FFF solid;
            border-radius: 3px;
            text-align: center;
        }

        .industry-icon{
            font-size: 30px;
            color: #1E9FFF;
            margin-bottom: 10px;
        }

        .industry-name {
            color: #1E9FFF;
        }
    </style>


</html:header>
<body style="background-color: #eeeeee">
    <input type="hidden" id="companyId" value="${companyId}">
    <div class="layui-fluid">
        <div class="center">
            <div class="title">选择行业</div>

            <div class="layui-row">
                    <c:forEach var="industry" items="${industryList}">
                        <div class="layui-col-xs4" >
                            <div class="industry-box" id="${industry.id}">
                                <div><i class="${industry.icon} industry-icon"></i></div>
                                <div class="industry-name">${industry.name}</div>
                            </div>
                        </div>
                    </c:forEach>
            </div>

            <div style="font-size: 12px; color: #aaaaaa;padding: 0 20px 0 20px;">
                烟酒食品行业可以针对某个商品开启保质期批次功能。
                家电数码行业可以开启商品序列号功能
            </div>

        </div>
    </div>
    <script>
        jQuery(function () {
            $(".industry-box").mouseover(function(){
                $(this).css("border","1px #FF5722 solid");
                $(this).find(".industry-icon").css("color","#FF5722");
                $(this).find(".industry-name").css("color","#FF5722");
            }).mouseout(function () {
                $(this).css("border","1px #1E9FFF solid");
                $(this).find(".industry-icon").css("color","#1E9FFF");
                $(this).find(".industry-name").css("color","#1E9FFF");
            });

            $(".industry-box").click(function () {
                if ($("#companyId").val() == "") {
                    tip("不是从注册页面跳转过来，无法进行行业选择");
                    return;
                }

                var data = {
                    id: $("#companyId").val()
                    ,industryId:$(this).attr("id")
                };
                post("${baseUrl}register/industry.action",data,function (data) {
                    if (data.code == 1) {
                        window.location.href = "${baseUrl}/register/successful.action";
                    } else {
                        tip("行业选择失败，请重试");
                    }
                });
            });


        });
    </script>
</body>
</html>